<template>
    <div class="login">
        <div class="login_content">
            <h1>登录</h1>
            <div class="content">
                <n-input placeholder="账号/工号" size="large" v-model:value="params.account">
                    <template #prefix>
                        账号&nbsp;&nbsp;&nbsp;
                    </template>
                </n-input>
                <br><br>
                <n-input type="password" show-password-on="click" placeholder="密码" size="large"
                    v-model:value="params.password" @keyup.enter="login">
                    <template #prefix>
                        密码&nbsp;&nbsp;&nbsp;
                    </template>
                </n-input>
                <br><br>
                <n-button block type="primary" size="large" :loading="loading" @click="login">登录</n-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { login as Login } from "@/api"
import { useRouter } from "vue-router"
const params = ref({})
const router = useRouter()
import store from "@/stores"
const loading = ref(false);
function login() {
    const query = JSON.parse(JSON.stringify(params.value))
    if (!query.account) return $message.warning("请输入账号")
    if (!query.password) return $message.warning("请输入密码")
    loading.value = true
    Login(query).then(res => {
        loading.value = false
        if (res.code != 200) return $message.error(res.message)
        $message.success(res.message)
        // console.log(res);
        store().userInfo.token = res.token
        router.push("/")
    })
}
</script>
<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
}

.login_content {
    padding: 0 60px;
    width: 500px;
    height: 350px;
    box-shadow: 0 0 10px 10px rgba(153, 153, 153, 0.1);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;

    h1 {
        font-weight: bolder;
        letter-spacing: 10px;
        color: #4086ff;
        text-align: center;
        line-height: 100px;
    }
}
</style>